<template>
  <div class="scroll-item">
    <TabTitle :tabName="tabName" v-if="tabName" />
    <div class="card-container">
      <p class="top-title" v-if="hasReal">{{ itemName }}</p>
      <slot name="real"></slot>
      <p class="top-title" v-if="hasHistory">历史数据</p>
      <slot name="history"></slot>
    </div>
    <slot name="other"></slot>
  </div>
</template>
<script setup lang="tsx">
import TabTitle from '../comm/TabTitle.vue';

defineProps({
  tabName: {
    type: String,
    default: '',
  },
  hasHistory: {
    type: Boolean,
    default: true,
  },
  hasReal: {
    type: Boolean,
    default: true,
  },
  itemName: {
    type: String,
    default: '实时数据',
  },
});
</script>
<style lang="scss" scoped>
.scroll-item {
  width: calc(100% - 20px);
  margin-bottom: 10px;

  .scroll-item-title {
    position: relative;
    height: 38px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-color);

    div {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .scroll-item-title-after {
      right: 28px;
    }
  }
}

.top-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 15px 0;
}

.card-container {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
</style>
